<script setup>
/*
    {{}} : 插值表达式 ， 结果和v-text 一致 ， 渲染标签中文本内容
    v-text : 相当于innerText , 渲染标签中文本内容
    v-html : 相当于innerHTML , 渲染（文本+标签）内容 , 并且会解析标签
*/
let msg = "Hello ! "
let sayHello = () => {
  return "Hello Vue"
}
let num = 1
let person1 = {
  id: 1,
  name: "国旭",
  age: 18,
  eat: function () {
    return  "爱吃"
  },
}
let add = function (a, b) {
  return a + b
}
let sum = function ([a,b]) {
  return a + b
}
</script>

<template>
  <div>
    <p>{{ msg }}</p>
    <p>{{ sayHello() }}</p>
    <p v-text="msg"></p>
    <p v-text="sayHello()"></p>
    <p v-text="sayHello() + ' hahahaha'"></p>
    <p v-html="msg"></p>
    <p>{{ ++num }}</p>
    <p>zheshi : {{ sayHello() }} , 'zhangsan'</p>
    <p>person1 : {{ person1.eat() }}</p>
    <p>person1 : {{ person1.name + person1.eat() + ' 牛肉包' }}</p>
    <p>add : {{ add(1, 2) }}</p>
    <p>sum : {{ sum([1, 2]) }}</p>
  </div>

</template>

<style scoped>

</style>
